---
title: Sonner
sidebar:
  order: 4
---

import Preview from "../../../components/Preview.astro";

An opinionated toast component.

<Preview src="sonner" minHeight="500px">

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    final sonner = ShadSonner.of(context);
    final id = Random().nextInt(1000);
    final now = DateTime.now();
    sonner.show(
      ShadToast(
        id: id,
        title: const Text('Event has been created'),
        description: Text(DateFormat.yMd().add_jms().format(now)),
        action: ShadButton(
          child: const Text('Undo'),
          onPressed: () => sonner.hide(id),
        ),
      ),
    );
  },
),
```

</Preview>
